<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>列表</title>
	<link type="text/css" rel="stylesheet" th:href="@{/css/page.css}"/>
	<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
	<!-- mmGrid -->
	<link rel="stylesheet" type="text/css" th:href="@{/plug/mmGrid/mmGrid.css}"/>
	<script type="text/javascript"  th:src="@{/plug/mmGrid/mmGrid.js}" ></script>
	<!-- mmGrid page -->
	<link rel="stylesheet" type="text/css" th:href="@{/plug/mmGrid/mmPaginator.css}"/>
	<script type="text/javascript" th:src="@{/plug/mmGrid/mmPaginator.js}" ></script>

	<!-- layer -->
	<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"  media="all"/>
	<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>

	<link type="text/css" rel="stylesheet" th:href="@{/js/layer/skin/layer.css}"/>
	<script type="text/javascript" th:src="@{/js/layer/layer.js}" ></script>
	<style type="text/css">
	</style>

</head>
<body>
<div  lay-allowclose="true" style="margin-left:15px; width: 98%">
	<div class="first_div" style="border:none;">
		<table class="param_table" style="margin-left:10px;" >
			<tr>
				<td style="width:150px;">
					<!--类型:1可回收,2干垃圾,3湿垃圾,4有害垃圾-->
					<span>类型：</span>
					<select id="type" name="type" class="input_0">
						<option value="1">跑步</option>
						<option value="2">骑行</option>
						<option value="3">行走</option>
					</select>
				</td>
				<td style="">
					<div class="layui-btn-group">
						<button class="layui-btn" onclick="search()">查询</button>
						<button class="layui-btn" onclick="addRow()">增加</button>
					</div>
				</td>
			</tr>
		</table>

		<div style="margin:3px 10px 10px 10px;"></div>
		<div id="exampleTableUser" style="margin-top:5px;" ></div>
		<div id="paginator11-1" align="right" style="margin-right:10px;" ></div>
	</div>
</div>
</body>
</html>

<script type="text/javascript">


	$(function(){
		//表格
		$('#exampleTableUser').mmGrid({
			root:'rows',// 和后台数据保存列一致,对应MMGridPageVoBean rows
			url:"/clockin/getAllByLimitUser",
			width: 'auto',
			height: 'auto',
			//checkCol: true,
			fullWidthRows: true, //表格第一次加载数据时列伸展，自动充满表格
			showBackboard: false,
			//multiSelect: true,
			indexCol: true,  //索引列
			params:function(){
				var param = new Object();
				param.type = $.trim($("#type").val());
				return param;
			},
			cols: [{title: 'ID', name: 'id', width:60, hidden:true},
				{title: '开始时间', name: 'startTime', width:40},
				{title: '结束时间', name: 'endTime', width:40},
				{title: '距离', name: 'distance', width:40},
				{title: '卡路里', name: 'calorie', width:40},
				{title: '类型', name: 'type', width:80, renderer:function(val, item, rowIndex){
						var t = "";
						switch (val) {
							case 1: t = "跑步";break;
							case 2: t = "骑行";break;
							case 3: t = "步行";break;
						}
						return t;
					}},
				{title: '创建时间', name: 'createTime', width:30},
				{title: '操作', name: 'id', width:20, renderer:function(val, item, rowIndex){
						var buttonStr ='<span class=" layui-btn layui-btn-danger layui-btn-sm" onclick="deleteRowOne('+"\'"+item.id+"\'"+')" >删除</span>';
						return "<div class='span_btus' >" + buttonStr + "</div>";
					}}
			],
			plugins : [
				$('#paginator11-1').mmPaginator({
					totalCountName: 'total',    //对应MMGridPageVoBean count
					page: 1,                    //初始页
					pageParamName: 'page',      //当前页数
					limitParamName: 'limit', //每页数量
					limitList: [10, 20, 30, 50]
				})
			]
		});
	});

	//查询
	function search(){
		$('#exampleTableUser').mmGrid().load({"page":1});
	}

	function addRow(){
		layer.open({
			type: 2,
			title: '增加',
			area: ['50%', '60%'],
			content: '/clockin/add' //iframe的url
		});
	}


	//删除一行
	function deleteRowOne(id){
		layer.confirm('确认删除吗？', {icon: 3, title:'提示'}, function(index){
			var param = [];
			param.push({"name":"id", "value":id});
			$.ajax({
				type:"POST",
				async:true,  //默认true,异步
				data:param,
				url:"/clockin/del",
				success:function(data){
					if(data == "SUCCESS"){
						layer.alert('删除成功！', {icon: 1}, function(indexOk){
							search();
							layer.close(indexOk);
						});
					}else{
						layer.alert('删除失败！', {icon: 2}, function(indexNo){
							layer.close(indexNo);
						});
					}
				}
			});
		});
	}
</script>